@import '@/assets/styles/variables.scss';

<template>
  <div class="history-container">
    <!--搜索    -->
    <div class="formSearch">
      <el-form :inline="true" :model="searchData">
        <el-form-item label="标题">
          <el-input v-model="searchData.noticeTitle" maxlength="20" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="消息类型">
          <el-select
            v-model="searchData.noticeType"
            placeholder="请选择消息类型"
            clearable
            style="width: 200px"
          >
            <el-option label="系统通知" :value="1" />
            <el-option label="公告" :value="2" />
            <el-option label="站内信" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="发送时间">
          <el-date-picker
            v-model="searchData.dates"
            type="daterange"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getAll">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!--表格-->
    <el-table
      v-loading="loading.table"
      :data="tableData"
      border
      :header-cell-style="{ background: '#D6E4FF', color: '#333333' }"
      tooltip-effect="dark"
      :style="{ width: '100%' }"
      class="dataTable"
    >
      <el-table-column label="标题" width="200">
        <template #default="scope">{{ scope.row.noticeTitle }}</template>
      </el-table-column>
      <el-table-column label="内容" prop="noticeContent" />
      <el-table-column label="消息类型" prop="noticeType">
        <template #default="scope">
          <span v-if="scope.row.noticeType === 1">系统通知</span>
          <span v-else-if="scope.row.noticeType === 2">公告</span>
          <span v-else-if="scope.row.noticeType === 3">站内信</span>
          <span v-else>{{ scope.row.noticeType }}</span>
        </template>
      </el-table-column>
      <el-table-column label="发送时间" prop="createTime" />
      <el-table-column label="操作">
        <template #default="scope">
          <div class="btnList">
            <el-button link type="primary" @click="getDetail(scope.row)">详情</el-button>
            <el-popconfirm title="确定删除该菜单吗？" @confirm="handleDelete(scope.row)">
              <template #reference>
                <el-button link type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!--分页组件专用滚动容器-->
    <div class="pagination-scroll-wrapper">
      <el-pagination
        :current-page="searchData.page"
        :page-size="searchData.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        background
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!--详情对话框-->
    <el-dialog v-model="detailsVisible" title="消息详情" width="500px">
      <el-form :model="detailData" label-width="100px">
        <el-form-item label="消息标题">
          <el-input v-model="detailData.noticeTitle" />
        </el-form-item>
        <el-form-item label="消息内容">
          <el-input v-model="detailData.noticeContent" />
        </el-form-item>
        <el-form-item label="消息类型">
          <el-input v-model="formattedNoticeType" readonly />
        </el-form-item>
        <el-form-item label="发布时间">
          <el-input v-model="detailData.createTime" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="detailsVisible = false">关 闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, onMounted, computed } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { noticeDelete, noticeGetById, noticeGetAll } from '@/api/noticeApi'
  import { ApiStatus } from '@/utils/http/status'
  import type { CereNotice, NoticeGetAllParam } from '@/api/model/noticeModel'

  //表格相关
  const loading = ref({
    table: false
  })
  const tableData = ref<CereNotice[]>([])
  const total = ref(0)

  //搜索表单
  const searchData = reactive<NoticeGetAllParam>({
    page: 1,
    pageSize: 10,
    noticeTitle: '',
    noticeType: undefined,
    dates: []
  })

  //详情对话框相关
  const detailsVisible = ref(false)
  const detailData = ref<Partial<CereNotice>>({})

  // 计算属性：格式化消息类型
  const formattedNoticeType = computed(() => {
    const type = detailData.value.noticeType
    if (type === 1) return '系统通知'
    if (type === 2) return '公告'
    if (type === 3) return '站内信'
    return type
  })

  //分页获取消息列表
  const getAll = async () => {
    loading.value.table = true
    try {
      const res = await noticeGetAll(searchData)
      if (res.code === ApiStatus.success) {
        tableData.value = res.data.list
        total.value = res.data.total
      } else {
        ElMessage.error(res.message || '获取消息列表失败')
      }
    } catch (error) {
      console.error(error)
      ElMessage.error('获取消息列表失败')
    } finally {
      loading.value.table = false
    }
  }

  //处理详情查询
  const getDetail = async (row: CereNotice) => {
    try {
      const res = await noticeGetById({ noticeId: row.noticeId })
      if (res.code === ApiStatus.success) {
        detailData.value = res.data
        detailsVisible.value = true
      } else {
        ElMessage.error(res.message || '获取消息详情失败')
      }
    } catch (error) {
      console.error(error)
      ElMessage.error('获取消息详情失败')
    }
  }

  //处理删除
  const handleDelete = async (row: CereNotice) => {
    ElMessageBox.confirm('确定删除该消息吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      try {
        const res = await noticeDelete({ noticeId: row.noticeId })
        if (res.code === ApiStatus.success) {
          ElMessage.success('删除成功')
        }
      } catch (error) {
        console.error(error)
        ElMessage.error('删除失败')
      }
    })
  }

  //重置搜索条件
  const reset = () => {
    searchData.page = 1
    searchData.pageSize = 10
    searchData.noticeType = undefined
    searchData.dates = []
    searchData.noticeTitle = ''
    getAll()
  }

  // 处理分页
  const handleSizeChange = (val: number) => {
    searchData.pageSize = val
    getAll()
  }

  const handleCurrentChange = (val: number) => {
    searchData.page = val
    getAll()
  }

  // 初始化
  onMounted(() => {
    getAll()
  })
</script>

<style lang="scss" scoped>
  .history-container {
    padding: 20px;

    .formSearch {
      padding: 15px;
      margin-bottom: 20px;
      background-color: #f8f9fa;
      border-radius: 4px;

      :deep(.el-form-item) {
        margin-bottom: 0;
      }
    }

    .dataTable {
      margin-bottom: 20px;
    }

    .btnList {
      display: flex;
      gap: 10px;
    }

    .dialog-footer {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
    }
  }

  // 分页滚动容器样式
  .pagination-scroll-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch; // 优化移动端滚动体验
  }

  .pagination-scroll-wrapper::-webkit-scrollbar {
    height: 6px;
  }

  .pagination-scroll-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }

  .pagination-scroll-wrapper::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
  }

  .pagination-scroll-wrapper::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
  }

  // 响应式适配
  @media screen and (max-width: $device-phone) {
    .history-container {
      padding: 10px;

      .formSearch {
        padding: 10px;

        :deep(.el-form-item) {
          width: 100%;
          margin-bottom: 10px;
        }

        :deep(.el-form-item__content) {
          width: 100%;
        }

        :deep(.el-input),
        :deep(.el-select),
        :deep(.el-date-editor) {
          width: 100% !important;
        }

        :deep(.el-form-item__label) {
          justify-content: flex-start;
        }
      }

      :deep(.el-table) {
        font-size: 12px;

        .el-table-column {
          padding: 5px 0;
        }
      }

      :deep(.btnList) {
        flex-direction: column;
        gap: 5px;
      }

      // 移动端分页容器额外样式
      .pagination-scroll-wrapper {
        padding-bottom: 10px;
      }
    }
  }
</style>
